<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
        {{meg.split('').reverse().join('')}}
        <br>
        {{reversestr}}
        <br>
        {{reversestr}}
        <br>
        {{reversestr}}
        <br>
        {{reversestr}}
        <br><br><br><br><br><br><br>
        {{Reversea()}}
        <br>
        {{Reversea()}}
        <br>
        {{Reversea()}}
        <br>
        {{Reversea()}}
        <br>
        {{Reversea()}}

        <br><br><br><br>
        {{restr}}
        <ul>
            <li v-for="item in list">
                {{item.name}}---{{like(item.like)}}
            </li>
        </ul>
        {{address}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:"#box",
        data:{
            meg:"hello zhenglei",
            restr:"",
            price:"山西",
            add:"运城",
            list:[
                {
                    name:'asdfh',
                    like:[1,2,3]
                },
                {
                    name:'锥心刺骨',
                    like:[1,3]
                },
                {
                    name:'去玩儿',
                    like:[2,3]
                },
            ],
            obj:{
                    1:'阿斯蒂芬',
                    2:'asdfg',
                    3:'爱上对方过后'
                }
        },
        computed:{
            reversestr(){
                console.log('------reversestr-----')
                return this.meg.split('').reverse().join('')
            },
            address:{
                set(val){
                    this.price = val.split('-')[0];
                    this.add = val.split('-')[1]
                },
                get(){
                    return this.price + '-' + this.add
                }
            }
        },
        methods:{
            Reversea(){
                console.log('------Reversea-----')
                return this.meg.split('').reverse().join('')
            },
            like(arr){
                return arr.map(item => this.obj[item]).join('-')
            }
        },
        watch:{
            msg(newVal,oldVal){
                this.restr = newVal.split('').reverse().join('')
                console.log(newVal,oldVal)
            },
            getprice(newval){
                this.address = newval + '-' + this.add
            },
            getadd(newval){
                this.address = this.price + '-' + newval
            }
        }
    })
</script>
</html>